import React, { useState, useEffect } from 'react';
import './Modal.css';

const EditProjectGroupModal = ({ isOpen, onClose, onSubmit, projectGroup }) => {
  const [editedProjectGroup, setEditedProjectGroup] = useState({
    id: '',
    name: '',
    description: ''
  });

  // 当projectGroup变化时更新表单
  useEffect(() => {
    if (projectGroup) {
      setEditedProjectGroup({
        id: projectGroup.id,
        name: projectGroup.name,
        description: projectGroup.description
      });
    }
  }, [projectGroup]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setEditedProjectGroup(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(editedProjectGroup);
  };

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-container">
        <div className="modal-header">
          <h2>编辑项目组</h2>
          <button className="close-button" onClick={onClose}>×</button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="modal-body">
            <div className="form-group">
              <label htmlFor="name">项目组名称</label>
              <input
                type="text"
                id="name"
                name="name"
                value={editedProjectGroup.name}
                onChange={handleChange}
                required
                placeholder="请输入项目组名称"
              />
            </div>
            <div className="form-group">
              <label htmlFor="description">项目组描述</label>
              <textarea
                id="description"
                name="description"
                value={editedProjectGroup.description}
                onChange={handleChange}
                placeholder="请输入项目组描述"
                rows="4"
              ></textarea>
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="cancel-button" onClick={onClose}>取消</button>
            <button type="submit" className="submit-button">保存</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default EditProjectGroupModal;
